<template>
	<view>
		<map :latitude="lat" :longitude="lng"></map>
		<cover-view class="container">
			<cover-view class="info">
				<cover-view class="colorfont font30">收货人信息</cover-view>
				<!-- cover-input伪代码实现 -->
				<cover-view class="input-num">
					<cover-view class='cover-input' @click='tapInput'>
						<cover-view class='text'>{{inputInfo}}</cover-view>
						<input class='input' :value='inputModel' :focus='inputFocus' @blur='blurInput'></input>
					</cover-view>
					<cover-view class='cover-input' @click='tapInput2'>
						<cover-view class='text'>{{inputInfo2}}</cover-view>
						<input class='input' :value='inputModel2' :focus='inputFocus2' @blur='blurInput2'></input>
					</cover-view>
				</cover-view>

				<!-- cover-input伪代码实现 -->
			</cover-view>
			<cover-view class="store">
				<cover-view class="store-title">乐町服饰（线下店名）
					<cover-view class="store-distance">12.0km</cover-view>
				</cover-view>
				<cover-view class="store-address">
					<cover-image src="../../static/home/store/address.png" class="img"></cover-image>
					<cover-view class="add-info">江西省南昌市青山湖区泰豪软件园南区一楼12栋9单元12138</cover-view>
				</cover-view>
				<cover-view class="store-time">
					<cover-image src="../../static/home/store/time.png" class="img"></cover-image>
					<cover-view class="time-info">
						<cover-view>周一～周五 10:00-18:00</cover-view>
						<cover-view>周六～周日 10:00-12:00 14:00-16:00</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="bom-btn">
				<cover-view class="notice">
					我已了解
					<cover-view class="herf">《门店自提流程须知》</cover-view>
				</cover-view>
				<cover-view class="sure-btn">确定</cover-view>
			</cover-view>
		</cover-view>
		<cover-view class="modal">
			<cover-view class="modal-cancle"></cover-view>
			<cover-view class="modal-container">
				<cover-view class="container-title">门店自提流程须知</cover-view>
				<!-- <cover-view class="container-content">对于提供门店自提的商家，用户可在下单
					时选择门店自提。成功付款后，可收到商
					家的备货通知，商家完成备货后会通过手
					机短信或者app消息通知您至门店提货。
					“门店自提”的商品同样享受企惠平台权益
					若有其他需求或疑问可通过商家客服了解
					相关问题</cover-view> -->
				<cover-view>知道了</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				lat: '',
				lng: '',
				inputFocus: false, // input 框的focus状态
				inputModel: '', // input 框的输入内容
				inputInfo: '请输入姓名', // cover-view 显示的 input 的输入内容,初始值充当placeholder作用
				inputFocus2: false, // input 框的focus状态
				inputModel2: '', // input 框的输入内容
				inputInfo2: '请输入手机号', // cover-view 显示的 input 的输入内容,初始值充当placeholder作用
			}
		},

		onLoad(option) {
			this.lat = uni.getStorageSync('authorize').latitude;
			this.lng = uni.getStorageSync('authorize').longitude
		},

		methods: {
			/**
			 * 将焦点给到 input（在真机上不能获取input焦点）
			 */
			tapInput() {
				this.inputFocus = true,
					//初始占位清空
					this.inputInfo = ''
			},

			/**
			 * input 失去焦点后将 input 的输入内容给到cover-view
			 */
			blurInput(e) {
				this.inputInfo = e.detail.value || '请输入姓名'
			},
			/**
			 * 将焦点给到 input（在真机上不能获取input焦点）
			 */
			tapInput2() {
				this.inputFocus2 = true,
					//初始占位清空
					this.inputInfo2 = ''
			},

			/**
			 * input 失去焦点后将 input 的输入内容给到cover-view
			 */
			blurInput2(e) {
				this.inputInfo2 = e.detail.value || '请输入手机号'
			}
		}
	}
</script>

<style lang="scss">
	map {
		width: 750upx;
		height: 100vh;
	}

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.info {
		background-color: #fff;
		width: 690upx;
		margin: 0 auto;
		height: 210upx;
		border-radius: 20upx;
		padding: 36upx;
	}

	.store {
		background-color: #fff;
		width: 690upx;
		margin: 28upx auto;
		height: 280upx;
		border-radius: 20upx;
		padding: 36upx;

		.store-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #0B0E11;
			margin-right: 10rpx;
			display: flex;
			align-items: center;

			.store-distance {
				color: #FF5E00;
				font-size: 24rpx;
			}
		}

		.store-address {
			margin-top: 20rpx;
			display: flex;
			align-items: flex-start;

			.img {
				width: 28rpx;
				height: 34rpx;
			}

			.add-info {
				font-size: 24rpx;
				color: #8E8E93;
				width: 540rpx;
				overflow: inherit;
				white-space: pre-wrap;
				margin-left: 20rpx;
			}
		}

		.store-time {
			margin-top: 20rpx;
			display: flex;
			align-items: flex-start;

			.img {
				width: 30rpx;
				height: 30rpx;
			}

			.time-info {
				font-size: 24rpx;
				color: #8E8E93;
				width: 540rpx;
				overflow: inherit;
				white-space: pre-wrap;
				margin-left: 20rpx;
			}
		}
	}

	.bom-btn {
		background-color: #fff;
		width: 750upx;
		// height: 180upx;
		padding: 28upx 36upx 15rpx 36upx;

		.notice {
			color: #0B0E11;
			font-size: 28rpx;
			display: flex;

			.herf {
				color: #FF5E00;
			}
		}

		.sure-btn {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
			border-radius: 49rpx;
			color: #fff;
			font-size: 36rpx;
			margin-top: 26rpx;
		}
	}

	.input-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.cover-input {
		width: 280upx;
		height: 80upx;
		line-height: 80upx;
		position: relative;
		padding: 0 15upx;
		background: rgba(245, 245, 250, 1);
		border-radius: 12upx;
	}

	.text {
		height: 70rpx;
		line-height: 70rpx;
	}

	.input {
		height: 70rpx;
		line-height: 70rpx;
		/* margin-top为text的高度，保持视觉上一致 */
		margin-top: -32px;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 9999;

		.modal-cancle {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.modal-container {
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 690rpx;
			border-radius: 24rpx;
			text-align: center;
			.container-content{
				overflow: inherit;
				white-space: pre-wrap;
			}
		}
	}
</style>
